<template>
    <div class="app-container">
        <levelbar></levelbar>
        <el-form label-width="90px" class="app-content" :rules="rules" :model="ruleForm" ref="ruleForm">
            <div class="box">
                <div class="appTitle">课程表</div>
                <div class="appTop"><P>班级</p></div>
                <el-row :gutter="41" class='searchCon'>
                    <el-col :span="8" v-if="schoolType == '0'"> 
                        <el-form-item label="年级" prop="gradeId" >
                            <grade v-model="ruleForm.gradeId"
                            :isDefaultFill='true' 
                            @defaultFillGrade='defaultFillGrade'></grade>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="班级" prop="classId">
                            <getClass v-model="ruleForm.classId" 
                            :isDefaultFill='isDefaultFillClass' 
                            @defaultFillClass='defaultFillClass'
                            :grade='ruleForm.gradeId'
                            @getClassName='getClassName'
                            ></getClass>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8"> 
                        <el-button type="primary" @click="search('ruleForm')">查询</el-button>
                    </el-col>
                </el-row>
                <div class="appTop"><P>课程表</p></div>
                <el-row v-if="isSearch">
                    <div class="tableSmall" v-show="syllabusState">
                        <div class="btntable">
                            <el-button  @click="updateAdd">新增一行</el-button>
                            <el-button  @click="updateReduce">删除一行</el-button>
                            <el-button  @click="leadingIn">导入</el-button>
                        </div>
                        <editSyllabus ref='getSyllabusData' :dataList1="dataList1"></editSyllabus>
                    </div>
                    <div class="tableSmall" v-show="!syllabusState">
                        <goPrintSyllabus ref='goPrintllabus' @editbus="editbus"></goPrintSyllabus>
                    </div>
                </el-row>
                <div class="footer" v-if="isSearch">
                    <el-button type="primary" @click="submitForm('ruleForm')" v-if="syllabusState" :loading="loadingBtn">保 存</el-button>
                </div>
            </div>
        </el-form>
        <leadingIn v-if="batchBind.dialogFormVisible" :batchBind="batchBind" @bindState="bindState"></leadingIn>
    </div>
</template>

<script>
import Levelbar from '../layout/Levelbar';
import goPrintSyllabus from './comps/goPrintSyllabus';
import editSyllabus from './comps/editSyllabus';
import leadingIn from './comps/leadingIn';
import school from 'components/SchoolClasss/school';
import grade from 'components/SchoolClasss/grade';
import getClass from 'components/SchoolClasss/class1';
import { mapGetters } from 'vuex';
import {saveClassSchedule, getClassSchedule, updateClassSchedule} from 'api/wisdom';
export default{
    name: 'syllabusMange',
    components: {Levelbar, goPrintSyllabus, editSyllabus, school, grade, getClass, leadingIn},
    data() {
        return {
            isDefaultFillClass: true, // 是否默认填充班级
            loadingBtn: false,
            isSearch: false,
            syllabusState: '',
            ruleForm: {
                classId: '',
                gradeId: '',
                schoolId: '',
                schoolName: '',
                className: '',
                showList: false, // 是否显示课程表
                classType: '0', // 表格类型
                sSubjectName: [] // 课程表
            },
            onOff: true,
            isModify: false,
            classId: '',
            syllabusPid: '',
            dataList1: [],
            batchBind: {
                dialogFormVisible: false,
                schoolId: '',
                classId: ''
            },
            rules: {
                gradeId: [
                    {required: true, message: '请选择年级', trigger: 'blur'}
                ],
                schoolId: [
                    { required: true, message: '请选择学校', trigger: 'change' }
                ],
                classId: [
                    { required: true, message: '请选择班级', trigger: 'change' }
                ],
                classType: [
                    { required: true, message: '请选择班表类型', trigger: 'change' }
                ]
            }
        }
    },
    computed: {
        ...mapGetters([
            'schoolId',
            'schoolName',
            'schoolType'
        ])
    },
    watch: {
        'ruleForm.classId': {
            handler(oldVal, newVal) {
                if (oldVal) {
                    if (this.onOff) {
                        this.isSearch = true;
                        this.classId = this.ruleForm.classId;
                        this.getSchedule();
                        this.onOff = false;
                        this.isDefaultFillClass=false;
                    }              
                }
            },
            immediate: true
            
        }
    },
    created() {
        // this.getSchedule();
    },
    methods: {
        // 提交
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.$confirm('确定要保存课程表吗?', ' ', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消'
                    }).then(() => {
                        this.loadingBtn = true;
                        this.ruleForm.sSubjectName = this.$refs.getSyllabusData.getDataApply();
                        let classType = '2';
                        if (this.isModify) {
                            updateClassSchedule(this.syllabusPid, this.schoolId, classType, this.schoolName, this.classId, this.ruleForm.className, this.ruleForm.sSubjectName).then(response => {
                                this.loadingBtn = false;              
                                this.$message({
                                    type: 'success',
                                    message: '保存课程表成功'
                                });
                                this.getSchedule();
                            }).catch(() => {
                                this.loadingBtn = false;
                            });
                        } else {
                            saveClassSchedule(this.schoolId, classType, this.schoolName, this.classId, this.ruleForm.className, this.ruleForm.sSubjectName).then(response => {
                                this.loadingBtn = false;              
                                this.$message({
                                    type: 'success',
                                    message: '保存课程表成功'
                                });
                                this.getSchedule();
                            }).catch(() => {
                                this.loadingBtn = false;
                            });
                        }
                        
                    }) 
                }
            });
        },
        getSchedule() {
            getClassSchedule(this.schoolId, this.schoolName, this.ruleForm.classId, this.ruleForm.className).then(res => {
                if (res.data.content) {
                    this.syllabusState = false;
                    this.isModify = true;
                    this.syllabusPid = res.data.content.pId;
                    this.$refs.goPrintllabus.getFirstList(res.data.content.subjectNames);
                    this.$refs.getSyllabusData.getList2(res.data.content.subjectNames);
                } else {
                    this.isModify = false;
                    this.$refs.getSyllabusData.getList1();
                    this.syllabusState = true;
                }
            })
        },
        bindState() {
            this.getSchedule();
        },
        editbus() {
            this.syllabusState = true;
        },
        // 导入
        leadingIn() {
            this.batchBind.dialogFormVisible = true;
            this.batchBind.schoolId = this.schoolId;
            this.batchBind.classId = this.ruleForm.classId;
            this.batchBind.schoolName = this.schoolName;
            this.batchBind.className = this.ruleForm.className;
        },
        // 获取学校名称
        getSchoolName(a) {
            this.ruleForm.schoolName = a;
        },
        // 获取班级名称
        getClassName(className) {
            this.ruleForm.className = className;
            // this.search();
        },
        // 改变班级
        updateAdd() {
            this.$refs.getSyllabusData.updateAdd();
        },
        updateReduce() {
            this.$refs.getSyllabusData.updateReduce();
        },
        search(ruleForm) {
            this.$refs.ruleForm.validate((valid) => {
                if (valid) {
                    this.isSearch = true;
                    this.classId = this.ruleForm.classId;
                    this.getSchedule();
                }
            })
        },
        defaultFillGrade(gradeId) {
            this.ruleForm.gradeId=gradeId;
        },
        defaultFillClass(classId) {
            this.ruleForm.classId=classId;
        }
    }
}
</script>

<style lang="scss" scoped>
.app-container {
    position: relative;
    padding: 20px 20px 10px;
    .app-levelbar {
        height: 35px;
    }
    .el-form{
        box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.1);
        -webkit-box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.1);
        background:#fff;
        padding-bottom:100px;
        .appTitle{
            padding-top:8px;
            text-align: center;
            font-size: 18px;
            color: #333;
            line-height: 72px;
            font-weight: bold;
            font-family: Microsoft YaHei;
            border-bottom: 1px solid #ddd;
        }
        .appTop{
            position: relative;
            font-size: 14px;
            color: rgb(106, 85, 72);
            padding-left: 16px;
            margin: 30px 0;
            display: block;
            &::after {
                position: absolute;
                content:'';
                width: 4px;
                height: 14px;
                background: #ff5e2c;
                left: 0;
                top: 3px;
            }
        }
        .box{
            padding: 0px 50px 0;
            background:#fff;
        }
       .footer{
            text-align:center;
            margin-top:40px;
        }
        .tableSmall{
            width:100%;
            min-height:420px;
            .btntable{
                padding-left: 18px;
            }
        }
    }
    
}

</style>
